<template>
    <div class="cl6">
        <div class="iHead1">评价性指标</div>
        <div class="main">
            <!-- <div class="tab">
                <div :class="['tab-i', tabIndex == 0 ? 'tab-i-a' : '']" @click="tabIndex = 0">本年</div>
                <div :class="['tab-i', tabIndex == 1 ? 'tab-i-a' : '']" @click="tabIndex = 1">本季</div>
                <div :class="['tab-i', tabIndex == 2 ? 'tab-i-a' : '']" @click="tabIndex = 2">本月</div>
            </div> -->
            <div class="bolls">
                <div class="boll" v-for="(i, o) in mainInfo" :key="o">
                    <div :ref="'liquidfill' + (o + 1)" class="liquidfill"
                        :style="{ boxShadow: '0 0 10px ' + colorArr[o][1] }">
                    </div>
                    <div class="boll-t">{{ i[0] }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['infoData', 'posItem', 'yearItem'],
    data() {
        return {
            tabIndex: 0,
            chart1: null,
            chart2: null,
            chart3: null,
            chart4: null,
            mainInfo: [],
            colorArr: [['#eb2734', '#e7999e'], ['#348d16', '#a0db8d'], ['#3c7ffd', '#a1c1fc'], ['#e431a8', '#e990cb'], ['#e9973a', '#f5cb9c']]
        }
    },
    watch: {
        posItem: function (infoData) {
            this.bollsInit();
        },
        yearItem: function (infoData) {
            this.bollsInit();
        },
        tabIndex: function (infoData) {
            this.bollsInit();
        },
    },
    mounted() {
        this.bollsInit();
    },
    methods: {
        bollsInit() {
            this.$nextTick(() => {
                this.mainInfo = []
                this.infoData[15].map((i, o) => {
                    if (i[0] == this.posItem) {
                        i[this.yearItem].split(',').map(n => {
                            // console.log(n)
                            // let _item = []
                            // n.split(':')[1].split(',').map(m => {
                            // _item.push(n.split('-'))
                            // })
                            this.mainInfo.push(n.split('-'))
                        })
                    }
                })
                setTimeout(() => {
                    this.chart1 = this.$echarts.init(this.$refs.liquidfill1[0]);
                    this.chart2 = this.$echarts.init(this.$refs.liquidfill2[0]);
                    this.chart3 = this.$echarts.init(this.$refs.liquidfill3[0]);
                    this.chart4 = this.$echarts.init(this.$refs.liquidfill4[0]);

                    let _dataArr = [];
                    this.mainInfo.map((i, o) => {
                        _dataArr.push(
                            {
                                series: [{
                                    type: 'liquidFill',
                                    data: [i[1] / 100],
                                    backgroundStyle: {
                                        color: '#00000000'
                                    },
                                    radius: '95%',
                                    color: this.colorArr[o],
                                    label: {
                                        show: true,
                                        color: '#fff',
                                        insideColor: '#fff',
                                        fontFamily: 'PMZD',
                                        fontWeight: 300,
                                        fontSize: 14,
                                        textShadow: '0 0 8px #000',
                                        align: 'center',
                                        baseline: 'middle',
                                        formatter: function (params) {
                                            return params.value * 100 + '%'
                                        },
                                    },
                                    outline: {
                                        borderDistance: 2,
                                        itemStyle: {
                                            borderWidth: 2,
                                            borderColor: this.colorArr[o][1],
                                            shadowBlur: 10,
                                            shadowColor: 'rgba(255, 0, 0, 1)'
                                        }
                                    }
                                }]
                            }
                        )
                    })
                    this.chart1.setOption(_dataArr[0])
                    this.chart2.setOption(_dataArr[1])
                    this.chart3.setOption(_dataArr[2])
                    this.chart4.setOption(_dataArr[3])
                }, 500)
            });

        }
    }
}
</script>

<style lang="scss" scoped>
.cl6 {
    width: 300px;
    height: 130px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 300px;
        height: 165px;
        z-index: 1;
        background-image: url('../../assets/denglukuang.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: .4;
    }

    .main {
        position: relative;
        z-index: 2;
        color: #fff;
        display: flex;
        justify-content: space-around;

        .tab {
            border-radius: 8px;
            overflow: hidden;
            width: 60px;
            height: 120px;
            margin-top: 2px;
            margin-right: 5px;

            .tab-i {
                font-family: 'PMZD';
                font-size: 18px;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 40px;
                width: 60px;
                text-shadow: 0 0 8px #000;
                background-color: #409EFF44;
                letter-spacing: 5px;
                cursor: pointer;

                &:hover {
                    filter: brightness(1.2);
                }
            }

            .tab-i-a {
                background-color: #eeeeee44;
            }
        }

        .bolls {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;

            .boll {
                height: 60px;
                width: 120px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                background-image: url('../../assets/xiaobeijing2.png');
                background-size: 100% 100%;
                padding: 0 6px;
                box-shadow: 0 0 8px #00000055;

                .liquidfill {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                }

                .boll-t {
                    writing-mode: vertical-rl;
                    font-family: 'SJYHJT';
                    width: 40px;
                    font-size: 14px;
                    letter-spacing: 2px;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-shadow: 0 0 8px #000;
                }
            }

            .boll:nth-of-type(1),
            .boll:nth-of-type(2) {
                margin-bottom: 5px;
            }

            .boll:nth-of-type(1),
            .boll:nth-of-type(3) {
                margin-right: 10px;
            }

        }
    }
}
</style>